<template>
  <div class="era" style="background-color:rgb(242, 245, 245)">
    <img src="img/zjt.png" class="re" @click="fun()"/>
    <span class="new">小米有品众筹</span>
    <div class="bc"></div>
    <img class="bcimg" src="img/bcc.png" />

    <!-- ------------------------- -->
    <div
      class="rax-view"
      style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: absolute; padding: 3.2vw;margin-top:-1.2rem;border-radius: 0rem 0rem 0.05rem 0.05rem;"
    >
      <img
        src="img/quan.png"
        style="width: 25.6vw; height: 25.6vw; margin-right: 3.2vw; box-sizing: border-box; object-fit: cover; filter: blur(0px);"
      />
      <div
        class="rax-view"
        style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex: 1 1 0%; position: relative; max-width: 58.4vw;"
      >
        <div
          class="rax-view"
          style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: relative; overflow: hidden; max-width: 58.4vw; align-items: center;"
        >
          <div
            class="rax-view"
            style="box-sizing: border-box; display: flex; flex-direction: row; place-content: flex-start center; flex-shrink: 0; position: relative; height: 4.8vw; align-items: center; padding-left: 1.0667vw; padding-right: 1.0667vw; margin-right: 1.3333vw; border-radius: 0.4vw; overflow: hidden; text-align: center; line-height: 4.2667vw; background-color: rgb(205, 140, 57); border-color: rgb(205, 140, 57); border-width: 0.1333vw;"
          >
            <span
              class="rax-text"
              style="box-sizing: border-box; display: block; font-size: 2.9333vw; white-space: pre-wrap; color: rgb(255, 255, 255); align-items: center; justify-content: center; height: 4.8vw; line-height: 4.8vw;"
            >1元支持</span>
          </div>
          <span
            class="rax-text rax-text--overflow-hidden rax-text--singleline"
            style="box-sizing: border-box; display: block; font-size: 4.2667vw; white-space: normal; overflow: hidden; line-height: 6.4vw; font-family: PingFangSC-Regular, &quot;PingFang SC&quot;; color: rgb(0, 0, 0); text-overflow: clip; height: 5.8667vw; max-width: 46.9333vw;"
          >加热方向盘套</span>
        </div>
        <div
          class="rax-view"
          style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: relative; align-items: center; margin-top: 1.6vw;"
        >
          <div
            class="rax-view"
            style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0; position: relative; border-radius: 2.1333vw; background-color: rgba(0, 0, 0, 0.05); height: 1.3333vw; width: 38.9333vw; overflow: hidden;"
          >
            <div
              class="rax-view"
              style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0; position: relative; height: 1.3333vw; border-radius: 2.1333vw; background-image: linear-gradient(to left, rgb(248, 36, 0), rgb(242, 169, 73)); width: 26.8vw;"
            ></div>
          </div>
          <span
            class="rax-text"
            style="box-sizing: border-box; display: block; font-size: 2.9333vw; white-space: pre-wrap; margin-left: 1.6vw; color: rgb(248, 36, 0); line-height: 4.2667vw; font-family: PingFangSC-Medium, &quot;PingFang SC&quot;;"
          >69%</span>
          <!---->
        </div>
        <div
          class="rax-view"
          style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: relative; margin-top: 0.8vw;"
        >
          <span
            class="rax-text"
            style="box-sizing: border-box; display: block; font-size: 2.9333vw; white-space: pre-wrap; color: rgba(0, 0, 0, 0.6); line-height: 4.2667vw;"
          >3478人支持</span>
          <div
            class="rax-view"
            style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0; position: relative; width: 0.2667vw; height: 2.4vw; margin-top: 0.5333vw; background-color: rgba(0, 0, 0, 0.15); margin-left: 1.6vw; margin-right: 1.3333vw;"
          ></div>
          <span
            class="rax-text"
            style="box-sizing: border-box; display: block; font-size: 2.9333vw; white-space: pre-wrap; color: rgba(0, 0, 0, 0.6); line-height: 4.2667vw;"
          >剩余 12 天</span>
        </div>
        <div
          class="rax-view"
          style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: relative; margin-top: 2.9333vw;"
        >
          <span
            class="rax-text"
            style="box-sizing: border-box; display: block; font-size: 3.2vw; white-space: pre-wrap; font-family: PingFangSC-Semibold, &quot;PingFang SC&quot;; color: rgb(248, 36, 0); line-height: 5.0667vw; margin-right: 0.2667vw;"
          >¥</span>
          <span
            class="rax-text"
            style="box-sizing: border-box; display: block; font-size: 4.2667vw; white-space: pre-wrap; font-family: MIUIEX-Bold, MIUIEX; color: rgb(248, 36, 0); line-height: 5.8667vw;"
          >49</span>
          <!---->
        </div>
      </div>
    </div>
    <!-- ------------------------- -->
    <div class="nav">
      <div>正在众筹</div>
      <div>寻觅世间7款好物，只为精致你的生活</div>
      <div></div>
    </div>
    <!-- --------------------------- -->
    <Bb/>
    <Bb/>
    <Bb/>
    <Bb/>
    <!-- --------------------------- -->
  </div>
</template>

<script>
import Bb from "@/components/er/bb.vue"
export default {
  methods: {
    fun() {
      this.$router.push("/home");
    }
  },
  components:{
    Bb
  }
};
</script>

<style scoped>
.re {
  position: absolute;
  z-index: 222;
  width: 0.32rem;
  height: 0.32rem;
  margin-left: 0.1rem;
  margin-top: -3.7rem;
}
.bc {
  width: 100vw;
  height: 53.3333vw;
  position: absolute;
  top: 0vw;
  left: 0vw;
  border-bottom-right-radius: 13.3333vw;
  border-bottom-left-radius: 13.3333vw;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
}
.new {
  position: absolute;
  z-index: 22;
  color: white;
  font-size: 0.24rem;
  top: 0.12rem;
  width: 100%;
  text-align: center;
  font-family: FZYaoti;
  color: white;
}
.bcimg {
  width: 3.5rem;
  height: 1.8rem;
  position: absolute;
  top: 10%;
  left: 4%;
}

.nav {
  width: 0.43rem;
  width: 100%;
  margin-top: 3.76rem;
  display: flex;
}
.nav div:nth-child(1) {
  font-size: 0.2rem;
  line-height: 0.43rem;
  font-weight: bold;
  margin-left: 0.2rem;
}
.nav div:nth-child(2) {
  font-size: 0.13rem;
  color: rgb(51, 51, 51);
  font-weight: 300;
  line-height: 0.43rem;
  margin-left: 0.06rem;
}
</style>